<m-notice [icon]="'flaticon-exclamation m--font-primary'">
	For more info please check the components's official demos & documentation 
	<a class="m-link" href="https://material.angular.io/components/slide-toggle/overview" target="_blank">demos & documentation</a>
</m-notice>

<div class="row">
	<div class="col-xl-6">
		<m-material-preview [viewItem]="exampleBasicSlideToggles">
			<div class="m-section">
				<span class="m-section__sub">
					<code>mat-slide-toggle</code> is an
					<mark>on/off</mark> control that can be toggled via clicking or dragging.
				</span>
				<div class="m-separator m-separator--dashed"></div>
				<div class="example-container">
					<mat-slide-toggle>Slide me!</mat-slide-toggle>
				</div>
			</div>
		</m-material-preview>

		<m-material-preview [viewItem]="exampleLabelPositions">
			<div class="m-section">
				<p class="m-section__sub">
					<code>@Input() labelPosition: 'before' | 'after'</code> Whether the label should appear after or before the slide-toggle. Defaults to 'after'
				</p>
				<p class="m-section__sub">
					<code>@Output() change: EventEmitter&lt;MatSlideToggleChange&gt;</code> An event will be dispatched each time the slide-toggle changes its value.
				</p>
				<div class="m-separator m-separator--dashed"></div>
				<div class="example-container">
					<mat-slide-toggle [labelPosition]="labelPosition">Slide me!</mat-slide-toggle>
					<div class="m-separator m-separator--dashed"></div>
					<mat-slide-toggle (change)="changeLablesPositions()">Slide labels position</mat-slide-toggle>
				</div>
			</div>
		</m-material-preview>

	</div>
	<div class="col-xl-6">
		<m-material-preview [viewItem]="exampleConfigurableSlideToggle">
			<div class="m-section">
				<div class="example-container">
					<section class="example-section">
						<label class="example-margin">Color:</label>
						<mat-radio-group [(ngModel)]="color">
							<mat-radio-button class="example-margin" value="primary">
								Primary
							</mat-radio-button>
							<mat-radio-button class="example-margin" value="accent">
								Accent
							</mat-radio-button>
							<mat-radio-button class="example-margin" value="warn">
								Warn
							</mat-radio-button>
						</mat-radio-group>
					</section>
					<div class="m-separator m-separator--dashed"></div>
					<section class="example-section">
						<mat-checkbox class="example-margin" [(ngModel)]="checked">Checked</mat-checkbox>
					</section>
					<div class="m-separator m-separator--dashed"></div>
					<section class="example-section">
						<mat-checkbox class="example-margin" [(ngModel)]="disabled">Disabled</mat-checkbox>
					</section>
					<div class="m-separator m-separator--dashed"></div>
					<h5 class="example-h2">Result</h5>
					<section class="example-section">
						<mat-slide-toggle class="example-margin" [color]="color" [checked]="checked" [disabled]="disabled">
							Slide me!
						</mat-slide-toggle>
					</section>
				</div>
			</div>

		</m-material-preview>
	</div>
</div>